﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Contacts 101</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
    <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
    <!--script src="js/less-1.3.3.min.js"></script-->
    <!--append ‘#!watch’ to the browser URL, then refresh the page. -->

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="img/favicon.png">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container col-md-4">
        <!-- main contain -->
        <div>
            <label>First Name</label>
            <input id="cFname" class="form-control" type="text" name="First Name" value="" placeholder="Your First name" />
            <br />
            <label>Last Name</label>
            <input id="cLname" class="form-control" type="text" name="Last Name" value="" placeholder="Your Last name" />
            <br />
            <label>Phone</label>
            <input id="cPhone" class="form-control" type="tel" name="Phone" value="" placeholder="(555)555-5555" />
            <br />
            <label>Email</label>
            <input id="cEmail" class="form-control" type="email" name="Email" value="" placeholder="you@company.com" />
            <br />
            <button type="submit" class="btn btn-danger" onclick="myContacts.doAdd()">Add Contact</button>
        </div>

        <div>
            <ul id="results"></ul>
        </div>



    </div><!-- / main contain -->
    <!-- Table -->
    <div class="container col-md-4">
        <table class="table table-striped table-bordered table-condensed" id="tableResults">

            <!-- render content here -->

        </table>
    </div>


    <!-- modal for edit -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

    <!-- actual modal -->
    <div id="myEditModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-sm">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="mySmallModalLabel">Edit Contact</h4>
                </div>
                <div class="modal-body">
                    <!-- edit form -->
                    <div>
                        <label>First Name</label>
                        <input id="uFname" class="form-control" type="text" name="First Name" value="" placeholder="Your First name" />
                        <br />
                        <label>Last Name</label>
                        <input id="uLname" class="form-control" type="text" name="Last Name" value="" placeholder="Your Last name" />
                        <br />
                        <label>Phone</label>
                        <input id="uPhone" class="form-control" type="tel" name="Phone" value="" placeholder="(555)555-5555" />
                        <br />
                        <label>Email</label>
                        <input id="uEmail" class="form-control" type="email" name="Email" value="" placeholder="you@company.com" />
                        <br />
                        <button type="submit" class="btn btn-warning" data-dismiss="modal" onclick="myContacts.doSave()">Save</button>
                    </div>
                    <!-- / edit form -->
                </div>
            </div><!-- /.modal-content -->
        </div>

    </div>
    <div id="mydiv"></div>


    <script type="text/javascript" src="js/scripts.js"></script>

</body>
</html>

